<div id="app">
  <div class="flex items-center p2">
    <div style="flex: 1">
      <a href="/client/home" class="weui-btn weui-btn_mini weui-btn_default"> 返回 </a>
    </div>
    <div @click="removeMessage" class="weui-btn weui-btn_mini weui-btn_warn">删除</div>
  </div>

  <div v-if="messages.length==0" class="p1 gray font-12">请到机器人私聊界面,发送文本,图片,小程序等消息</div>
  <div class="weui-cells weui-cells_checkbox">
    <label class="weui-cell weui-cell_active weui-check__label" v-for="message, i in messages">
      <div class="weui-cell__hd">
        <input class="weui-check" type="checkbox" v-model="message.selected" />
        <i class="weui-icon-checked"></i>
      </div>
      <div class="weui-cell__bd">
        <message v-bind:message="message"></message>
      </div>
    </label>
  </div>
</div>

<script>
  Vue.component("message", {
    props: ["message"],
    template: `
      <div>
        <div v-if="message.type==6" class="flex items-start">
          <span class="bg-red font-12 px1 mr1 silver">图片</span><img class="border--silver border" v-bind:src="'data:image/png;base64,'+message.payload" style="width:80px;height:80px;" />
        </div>
        <div v-if="message.type==7"  >
          <div><span style="word-break: break-all;" class="bg-gray font-12 px1 mr1 silver">文本</span>{{message.payload}}</div>
        </div>

        <div v-if="message.type==9" class="flex items-start">
          <div><span class="bg-green font-12 px1 mr1 silver">小程序</span>{{message.payload.title}} - {{message.payload.description}}</div>
        </div>
      </div>
    `,
  });

  new Vue({
    el: "#app",
    data: function () {
      return {
        messages: [],
      };
    },
    created: function () {
      this.getMessages();
    },
    methods: {
      getMessages: function () {
        let that = this;
        axios.get("/client/messages").then(function (res) {
          that.messages = res.data.messages;
        });
      },
      removeMessages: function () {
        let ids = [];
        this.messages.forEach(function (msg) {
          if (msg.selected) {
            ids.push(msg._id);
          }
        });
        let that = this;
        axios
          .post("/client/messages/remove", {
            ids: ids,
          })
          .then(function (res) {
            that.getMessages();
          });
      },
    },
  });
</script>